<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, user-scalable=no">
    <meta id="m1" itemprop="name" content=""/>
    <meta id="m2"  itemprop="image" content="" />
    <meta id="m3"  name="description" itemprop="description" content="" />
    <title>其实我是冲着末尾的iPhone 7去的</title>
    <link href="../css/h5Share.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js?v=4"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
        body{
            position:relative;
        }
        img.img1{
            position:absolute;
            /*left:144px;*/
            /*top:488px;*/
            left:19.2%;
            top:36.5%
        }
        img.img2{
            position:absolute;
            /*left:144px;*/
            /*top:607px;*/
            left:19.2%;
            top:45.4%
        }
        img.img3{
            position:absolute;
            /*left:194px;*/
            /*top:557px;*/
            left:25.87%;
            top:41.69%
        }
        img.img4{
            position:absolute;
            /*left:194px;*/
            /*top:676px;*/
            left:25.87%;
            top:50.6%
        }
        img.img5{
            position:absolute;
            /*left:259px;*/
            /*top:724px;*/
            left:34.53%;
            top:54.2%
        }
        img.img6{
            position:absolute;
            /*left:78px;*/
            /*bottom:78px;*/
            left:1.73%;
            /*bottom:78px;*/
            top:61.53%;
        }
        img.img7{
            position:absolute;
            /*left:59px;*/
            /*bottom:152px;*/
            left:7.87%;
            /*bottom:152px;*/
            top:83.23%;
        }
        img.img8{
            position:absolute;
            /*left:59px;*/
            /*bottom:78px;*/
            left:58%;
            /*bottom:120px;*/
            top:84.66%;
        }
        input{
            position:absolute;
            font-size:42px;
            color:#1073e5;
            font-weight: bold;
            text-align: center;
        }
        .userName{
            background: url(../img/5/name2.png);
            width:412px;
            height:54px;
            left:25.87%;
            top:37%;
        }
        .userTel{
            background: url(../img/5/num.png);
            width:412px;
            height:48px;
            left:25.87%;
            top:45.4%
        }
        .img10{
            display:none;
        }
        .img9{
            position:absolute;
            /*left:259px;*/
            /*top:674px;*/
            left:59%;
            top:51.43%;
            display:block;
        }
        .img11{
            position:absolute;
            /*left:259px;*/
            /*top:674px;*/
            left:59%;
            top:42.43%;
            display:block;
        }
        .img0{
            position:absolute;
            width:100%;
            height:100%;
            left:0;
            right:0;
            bottom:0;
            top:0;
        }
    </style>
</head>
<body>
<img class="img0" src="../img/6/button.png" alt=""/>
<img class="img1" src="../img/6/name.png" alt=""/>
<img class="img2" src="../img/6/phone.png" alt=""/>
<img class="img3" src="../img/6/xiahuaxian.png" alt=""/>
<img class="img4" src="../img/6/xiahuaxian2.png" alt=""/>
<img class="img5" src="../img/6/dianji.png" alt=""/>
<img class="img6" src="../img/6/dsd.png" alt=""/>
<img class="img7" src="../img/6/click.png" alt=""/>
<img class="img8" src="../img/6/shou.png" alt=""/>
<input id="userName" class="userName" name="userName" autofocus  required type="text"/>
<input id="userTel" class="userTel" name="userTel" type="text" required pattern="^1[3|4|5|8][0-9]{9}$">
<img id="wrong" class="img10" src="../img/5/wrong.png" alt=""/>
<img id="wrong1" class="img10" src="../img/5/flaut.png" alt=""/>
<script>
    var endpoint = "/ixinghui/app/";
    var jsonpoint = "";
    var re = /^\d*/;
    var href = window.location.hash.replace(/$#/, '');
    var url=window.location.href.split('#')[0];

    userName.onfocus=function(){
        wrong1.className = "img10";
        if(browser.versions.android){
            $(document).ready(function () {
                $('body').height($('body')[0].clientHeight);
            });
        }
    }
    userName.onblur = function(){
        if(userName.validity.valid){
            wrong1.className = "img10";
        }else if(userName.validity.valueMissing){
            wrong1.className = "img11";
        }
    }
    userTel.onfocus = function(){
        wrong.className = "img10";
        if(browser.versions.android){
            $(document).ready(function () {
                $('body').height($('body')[0].clientHeight);
            });
        }
    }
    userTel.onblur = function(){
        if(userTel.validity.valid){
            wrong.className = "img10";
        }else if(userTel.validity.valueMissing){
            wrong.className = "img9";
            $('#wrong').attr('src','../img/5/sj.png')
        }else if(userTel.validity.patternMismatch){
            wrong.className = "img9";
            $('#wrong').attr('src','../img/5/wrong.png')
        }
    }
    $('.img5').click(function(){
        var name=$('.userName').val();
        var Tel=$('.userTel').val();
        if(userTel.validity.valid){
            openApp()
            function getH5(prams, callBack) {
                $.ajax({
                    async: true,
                    type: "get",
                    data: prams,
                    cache: false,
                    url:endpoint + "insertPhoneForH5" + jsonpoint,
                    success: function (data) {
                        console.log( data);
                        return callBack(data)
                    },
                    error: function (data) {
                        console.log(data)
                    }
                })
            }
            //调用获取课程介绍
            getH5(
                    {
                        name:name,
                        phoneNo:Tel
                    },
                    function(data){
                        console.log(data)
                    }
            )
        }else{
            wrong.className = "img9";
        }
    })
    $('.img7').click(function(){
        openApp()
    })
    $('.img8').click(function(){
        openApp()
    })
    function openApp(){
        if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
            var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
            var localUrl="";
//            var openIframe=createIframe();
            if (browser.versions.ios) {
                //打开中间页
                window.location.href="static.html";
            }
            if(browser.versions.android){
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    //在微信中打开
                    //打开中间页
                    window.location.href="static.html";
                    window.open(static.html);
                }
                if (ua.match(/WeiBo/i) == "weibo") {
                    localUrl="ixinghui://ixinghui.share.com";
                    window.location.href = localUrl;
                }
                if (browser.versions.MQQBrowser) {
                    //在QQ打开
                    localUrl="ixinghui://ixinghui.share.com";
                    window.location.href = localUrl;
                }
            }
        }else {
            //否则就是PC浏览器打开
            window.open("http://android.myapp.com/myapp/detail.htm?apkName=com.yunxuan.ixinghui")
        }
    }
    //    打开APP
    var browser = {
        versions: function () {
            var u = navigator.userAgent, app = navigator.appVersion;
            return {         //移动终端浏览器版本信息
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                MQQBrowser: u.indexOf('MQQBrowser') !== -1
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
</script>
<script src="../js/h5Share.js"></script>
</body>
</html>